<template>
  <div class="app-container">
    <p style="font-size: 14px;"><b style="font-size: 20px;">宠物管理</b> 用于管理小区里的宠物信息，包括业主、家庭成员及租户饲养的宠物</p>
    <el-card>
      <!-- 搜索框区域 -->
      <el-row>
        <el-form :inline="true" size="normal" :model="formData">
          <el-form-item label="宠物名称">
            <el-input placeholder="请输入" v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="小区名称">
            <el-select placeholder="" style="width: 150px" v-model="formData.community_code">
              <el-option v-for="item in ApartmentList" :key="item.id" :label="item.name" :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="栋数">
            <el-select placeholder="" style="width: 150px">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="收养时间">
            <div>
              <el-time-picker v-model="formData.adopt_time" is-range range-separator="To" start-placeholder="请选择"
                end-placeholder="请选择" style="width: 150px" />
            </div>
          </el-form-item>
          <el-form-item>
            <el-button @click="onReset">重置</el-button>
            <el-button type="primary" @click="onServe">查询</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </el-card>
      <el-card style="margin-top: 15px;">
      <!-- 新增按钮区域 -->
      <el-row style="position: relative;margin-bottom: 30px;" >
        <el-button style="position: absolute; right: 20px;" type="primary" size="default" @click="addRef.isShow = true">新增宠物</el-button>
      </el-row>
      <br/>
      <!-- 表格区域 -->
      <el-table :data="list" style="width: 100%" border="1px solid">
        <el-table-column prop="name" label="宠物名称" width="120" />
        <el-table-column prop="color" label="宠物颜色" width="120" />
        <el-table-column label="宠物照片">
          <template #default="{ row }">
            <imagePreview :src="row.photo" :width="50" :height="50" />
          </template>
        </el-table-column>
        <el-table-column label="小区名称">
          <template #default="{ row }">
            {{ row.community == null ? "未知" : row.community.name }}
          </template>
        </el-table-column>
        <el-table-column label="栋数">
          <template #default="{ row }">
            {{ row.building.name }}
          </template>
        </el-table-column>
        <el-table-column label="主人姓名">
          <template #default="{ row }">
            {{ row.member == null ? "未知" : row.member.name }}
          </template>
        </el-table-column>
        <el-table-column label="联系方式">
          <template #default="{ row }">
            {{ row.member == null ? "未知" : row.member.tel }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="描述" />
        <el-table-column prop="create_time" label="收养时间"></el-table-column>
        <el-table-column prop="address" label="操作" width="180">
          <template #default="{ row }">
            <el-button @click="editRow(row.id)" type="success">编辑</el-button>
            <el-popconfirm title="确认删除吗?" @confirm="delRow(row.id)">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table><br>
      <!-- 分页区域 -->
      <el-pagination @size-change="sizeChange" @current-change="currentChange" v-model:current-page="formData.current"
        v-model:page-size="formData.pageSize" layout="total, prev, pager, next" :total="total" background>
      </el-pagination>
    </el-card>
    <!-- 添加新增区域 -->
    <addForm ref="addRef" @updateList="initData" />
  </div>
  <el-from label-width="80px" style="text-align: center;">
    <div>Ant Design divro黑马前端合肥前端欢迎您</div>
    <div>© 2023 悦兴物业集团</div>
    <br>
  </el-from>
</template>

<script setup>
import imagePreview from "../../../components/hyImg/index.vue";
import { onMounted, reactive, ref } from "vue";
import { getPetList, delPetList } from "../../../api/pet";
import { formatDateArray } from "../../../utils/changeArr";
import { useApartmentList } from "../../../hooks/index";
import { ElMessage } from "element-plus";
import addForm from "./addForm.vue";

// =================================
// 列表数据
const formData = reactive({
  current: 1,
  pageSize: 10,
  adopt_time: "",
  community_code: "",
  name: "",
});

// adopt_time: "",
//   building: "",
//   building_code: "",
//   color: "",
//   remark: "",
//   name: "", //宠物名称
//   photo: "",
//   member: "", //联系人
//   member_id: "",

// ===============

// 新增
const addRef = ref();

const ApartmentList = useApartmentList();
// 定义总数
const total = ref(0);
// 定义列表数据
const list = ref([]);
// 定义方法
const initData = async () => {
  const res = await getPetList(formData);
  console.log(res);
  // 赋值
  list.value = formatDateArray(res.data.rows);
  total.value = res.data.count;
};
// 挂载，调用
onMounted(() => {
  initData();
});

// 页码切换事件
const currentChange = (val) => {
  formData.current = val;
  initData();
};
// 每页数量切换事件
const sizeChange = (val) => {
  formData.pageSize = val;
  initData();
};

// 搜索功能
const onServe = () => {
  formData.current = 1;
  initData();
};

// 搜索重置功能
const onReset = () => {
  Object.assign(formData, {
    current: 1,
    pageSize: 10,
    adopt_time: "",
    community_code: "",
    name: "",
  });
  initData();
};

// 删除功能
const delRow = async (id) => {
  await delPetList(id);
  ElMessage.success("删除成功");
  if (formData.current > 1 && list.value.length === 1) formData.current--;
  initData();
};

// 修改功能
const editRow = (id) => {
  addRef.value.replyData(id)
  // alert(id)
}
</script>

<style scoped></style>


